<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 响应式设计：适配移动端/PC端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AlexYLiang 轻量级多线程HTTP服务器</title>
    <!-- 引入Tailwind CSS实现快速样式设计（也可替换为自定义CSS） -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标库（用于链接、按钮等视觉元素） -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <!-- 自定义样式配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    // 自定义颜色：以技术感蓝色为主色调
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    // 自定义字体：适配中文显示
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        mono: ['Consolas', 'Monaco', 'monospace']
                    }
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-dark min-h-screen">
    <!-- 页面头部：导航栏 -->
    <header class="bg-white sticky top-0 z-50 card-shadow">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <!-- 项目名称与Logo -->
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-server text-primary text-2xl"></i>
                <h1 class="text-xl md:text-2xl font-bold text-primary">TinyWebServer</h1>
            </div>
            <!-- 仓库链接按钮：PC端显示文字，移动端显示图标 -->
            <a 
                href="https://gitee.com/AlexYLiang/TinyWebServer" 
                target="_blank" 
                rel="noopener noreferrer"
                class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-300"
            >
                <i class="fa-brands fa-gitee"></i>
                <span class="hidden sm:inline">访问Gitee仓库</span>
                <span class="sm:hidden">仓库链接</span>
            </a>
        </div>
    </header>

    <!-- 页面主体：项目核心信息 -->
    <main class="container mx-auto px-4 py-8 md:py-12">
        <!-- 项目简介区域 -->
        <section class="mb-12 bg-white rounded-xl p-6 md:p-8 card-shadow">
            <div class="flex items-center gap-3 mb-4">
                <i class="fa-solid fa-circle-info text-primary text-xl"></i>
                <h2 class="text-xl md:text-2xl font-bold">项目简介</h2>
            </div>
            <p class="text-gray-700 leading-relaxed">
                一款基于C++开发的高性能轻量级HTTP服务器，聚焦「高并发、低资源占用、易扩展」核心目标。通过模块化设计实现完整的HTTP协议交互能力，支持多客户端并发访问，可作为静态资源服务（如HTML、CSS、图片等）的基础组件，也可基于现有架构快速扩展动态请求处理（如CGI、API接口）功能，代码结构清晰，适合学习与生产环境轻量场景使用。
            </p>
        </section>

        <!-- 核心功能区域：网格布局，适配不同屏幕 -->
        <section class="mb-12">
            <div class="flex items-center gap-3 mb-6">
                <i class="fa-solid fa-cogs text-primary text-xl"></i>
                <h2 class="text-xl md:text-2xl font-bold">核心功能</h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 功能卡片1：HTTP协议支持 -->
                <div class="bg-white rounded-xl p-6 card-shadow hover:transform hover:scale-[1.02] transition-all duration-300">
                    <div class="bg-primary/10 text-primary w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa-solid fa-file-code text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">HTTP协议兼容</h3>
                    <p class="text-gray-700">
                        完整支持HTTP 1.1协议，可解析GET/POST请求类型，自动提取请求行（方法、路径、版本）、请求头部（如Host、Content-Length）及请求体数据，生成标准响应格式。
                    </p>
                </div>

                <!-- 功能卡片2：静态资源服务 -->
                <div class="bg-white rounded-xl p-6 card-shadow hover:transform hover:scale-[1.02] transition-all duration-300">
                    <div class="bg-primary/10 text-primary w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa-solid fa-file-image text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">静态资源传输</h3>
                    <p class="text-gray-700">
                        提供静态文件（HTML/CSS/JS/图片等）传输服务，自动识别文件后缀并匹配MIME类型（如text/html、image/jpeg），支持断点续传基础能力，保障资源加载效率。
                    </p>
                </div>

                <!-- 功能卡片3：高并发架构 -->
                <div class="bg-white rounded-xl p-6 card-shadow hover:transform hover:scale-[1.02] transition-all duration-300">
                    <div class="bg-primary/10 text-primary w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa-solid fa-users-gear text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">高并发处理</h3>
                    <p class="text-gray-700">
                        采用「线程池+epoll I/O多路复用」架构，基于边缘触发（ET）模式提升I/O效率，支持长连接（Keep-Alive）与连接超时自动回收，减少资源浪费。
                    </p>
                </div>

                <!-- 功能卡片4：错误处理 -->
                <div class="bg-white rounded-xl p-6 card-shadow hover:transform hover:scale-[1.02] transition-all duration-300">
                    <div class="bg-primary/10 text-primary w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa-solid fa-triangle-exclamation text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">标准错误响应</h3>
                    <p class="text-gray-700">
                        完善的错误处理机制，针对无效请求、文件不存在、方法不支持等场景，返回400（Bad Request）、404（Not Found）、501（Not Implemented）等标准HTTP状态码及友好提示页面。
                    </p>
                </div>

                <!-- 功能卡片5：资源安全 -->
                <div class="bg-white rounded-xl p-6 card-shadow hover:transform hover:scale-[1.02] transition-all duration-300">
                    <div class="bg-primary/10 text-primary w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa-solid fa-shield-halved text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">资源安全保护</h3>
                    <p class="text-gray-700">
                        实现路径访问控制，防止目录遍历攻击（如../跨目录访问），同时通过内存池减少动态内存分配开销，避免内存泄漏，保障服务长期稳定运行。
                    </p>
                </div>

                <!-- 功能卡片6：可扩展性 -->
                <div class="bg-white rounded-xl p-6 card-shadow hover:transform hover:scale-[1.02] transition-all duration-300">
                    <div class="bg-primary/10 text-primary w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <i class="fa-solid fa-puzzle-piece text-xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">模块化易扩展</h3>
                    <p class="text-gray-700">
                        核心模块（线程池、协议解析、连接管理）解耦设计，新增功能（如HTTPS、动态路由、日志系统）可在现有架构上快速集成，无需修改核心逻辑。
                    </p>
                </div>
            </div>
        </section>

        <!-- 技术栈区域：表格布局，清晰展示分类 -->
        <section class="mb-12 bg-white rounded-xl p-6 md:p-8 card-shadow">
            <div class="flex items-center gap-3 mb-6">
                <i class="fa-solid fa-layer-group text-primary text-xl"></i>
                <h2 class="text-xl md:text-2xl font-bold">技术栈</h2>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full border-collapse">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-3 px-4 font-semibold text-gray-800">技术分类</th>
                            <th class="text-left py-3 px-4 font-semibold text-gray-800">核心技术</th>
                            <th class="text-left py-3 px-4 font-semibold text-gray-800">应用场景</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-700">
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4 font-medium">C++特性</td>
                            <td class="py-3 px-4">C++11（智能指针、Lambda、线程库）、STL容器</td>
                            <td class="py-3 px-4">内存管理、线程封装、数据存储</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4 font-medium">网络编程</td>
                            <td class="py-3 px-4">Socket、TCP/IP协议、epoll I/O多路复用</td>
                            <td class="py-3 px-4">连接建立、I/O事件监听、高并发处理</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4 font-medium">并发控制</td>
                            <td class="py-3 px-4">线程池、互斥锁、条件变量、生产者-消费者模型</td>
                            <td class="py-3 px-4">任务调度、线程同步、避免资源竞争</td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4 font-medium">协议解析</td>
                            <td class="py-3 px-4">HTTP 1.1协议、状态机解析算法</td>
                            <td class="py-3 px-4">请求解析、响应生成、MIME类型匹配</td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4 font-medium">工程工具</td>
                            <td class="py-3 px-4">Valgrind（内存检测）、Webbench（压力测试）、GDB（调试）</td>
                            <td class="py-3 px-4">性能优化、错误排查、功能验证</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 项目成果区域：数据可视化+文字描述 -->
        <section class="bg-white rounded-xl p-6 md:p-8 card-shadow">
            <div class="flex items-center gap-3 mb-6">
                <i class="fa-solid fa-chart-line text-primary text-xl"></i>
                <h2 class="text-xl md:text-2xl font-bold">项目成果</h2>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- 左侧：性能数据 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4">性能指标</h3>
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-gray-700">并发连接数</span>
                                <span class="font-medium">2000+</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-primary h-2.5 rounded-full" style="width: 85%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-gray-700">QPS峰值</span>
                                <span class="font-medium">5000+</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-primary h-2.5 rounded-full" style="width: 90%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-gray-700">响应延迟</span>
                                <span class="font-medium">&lt;10ms</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-secondary h-2.5 rounded-full" style="width: 95%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-gray-700">单元测试覆盖率</span>
                                <span class="font-medium">80%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-secondary h-2.5 rounded-full" style="width: 80%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右侧：成果描述 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4">关键成果</h3>
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start gap-2">
                            <i class="fa-solid fa-check-circle text-secondary mt-1"></i>
                            <span>单节点性能：在普通Linux服务器（4核8G）上，可稳定支撑2000+并发连接，QPS峰值达5000+，响应延迟控制在10ms以内，满足轻量生产场景需求。</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="fa-solid fa-check-circle text-secondary mt-1"></i>
                            <span>资源优化：通过内存池、连接复用等设计，实现零内存泄漏（Valgrind检测验证），CPU/内存资源占用较传统单线程模型降低30%。</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="fa-solid fa-check-circle text-secondary mt-1"></i>
                            <span>测试保障：完成80%核心模块单元测试，覆盖协议解析、并发控制、错误处理等关键场景，通过Webbench压力测试验证稳定性。</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="fa-solid fa-check
